<template>
  <div class="material-main" ref="materialMain">
    <canvas class="myCanvas" ref="myCanvas"></canvas>
  </div>
</template>
<script>
import * as THREE from 'three'

export default {
  data() {
    return {
      renderer: null,
      scene: null,
      camera: null,
      light: null,
      material: null,
      geometry: null,
      mesh: null,
    }
  },
  mounted(){
    this.zoom()
    window.addEventListener('resize', this.zoom)
    this.renderHandle()
  },
  methods: {
    zoom(){
      this.$refs.myCanvas.width = this.$refs.materialMain.clientWidth;
      this.$refs.myCanvas.height = this.$refs.materialMain.clientHeight;
    },
    renderHandle(){
      this.renderer = new THREE.WebGLRenderer({
        canvas: this.$refs.myCanvas,
      })
      this.renderer.setClearColor('black')
      // 场景
      this.scene = new THREE.Scene()
      // 相机
      this.camera = new THREE.OrthographicCamera(-3, 3, 4, -4, 0.1, 100)
      this.camera.position.set(0, 0, 1)
      this.scene.add(this.camera)

      // 灯光
      this.light = new THREE.PointLight('#fff', 1, 200)
      this.light.position.set(10, 15, 25)
      this.scene.add(this.light)

      let textureLoader = new THREE.TextureLoader()
      // 加载的图片需要用require引入  需要在回调中加载
      const text = textureLoader.load(require('./imgs/chess.png'), (texture) => {
        const material = new THREE.MeshLambertMaterial({
          map: texture,
          color: 'red'
        })
        text.wrapS = text.wrapT = THREE.RepeatWrapping;
        text.repeat.set(5, 3)
        const geometry = new THREE.PlaneGeometry(3, 5)
        
        const mesh = new THREE.Mesh(geometry, material)
        this.scene.add(mesh)      
        this.renderer.render(this.scene, this.camera)
      })
     console.log(text)          
    }
    
  }
}
</script>
<style lang="less" scoped>
.material-main{
  width: 100%;
  height: 100%;
}
</style>
